<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue指令6(axion+vue)</title>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
    <h1>{{name}}</h1>
    <input type="button" value="点击测试" @click="getjoke">
    <input type="button" value="测试东焊数据接口" @click="getdata">

    <p>{{message}}</p>
</div>

<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        data:{
            name:"这是一个用npm方式搭建的工程",
            message:"你好"
        },
        methods:{
            getjoke:function () {
                console.log("你好");
                axios.get("http://poetry.apiopen.top/sentences").then(function (response){
                        // response为自己定义的形参，可以随便定义
                        console.log(response.data.result.name);
                        console.log(response.data.result.from);
                        console.log("成功获取");
                        alert("返回的名字是:  "+response.data.result.name);
                },function (err) {  }
                )
            },
            getdata:function () {
                console.log("你好");
                // axios.post("http://159.75.205.204:8881/user/login/force").then(function (response){
                // axios.post("http://159.75.205.204:8881/api/device/info/list",
                axios.post("http://159.75.205.204:8881/api/user/login/",
                    {
                        "userName":"admin",
                        "password":"123456"
                    }).then(function (response){
                    // response为自己定义的形参，可以随便定义
                        console.log(response);
                        console.log("成功获取");
                        alert("返回的名字是:  "+response);
                    },function (err) {  }
                )
            }
        }
    });
</script>
</body>
</html>
